<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>balance</title>
        <!-- 记得要写成 /css/public/header.css -->
        <!-- css/public/header.css 前边有个斜杠，说明是相对于根目录的 -->
        <link rel="stylesheet" href="/bootstrap-4.3.1-dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="/css/public/header.css">
        <link rel="stylesheet" href="/css/public/prolist.css">
        <link rel="stylesheet" href="/css/product.css">
        <script src="/js/jquery-3.3.1.min.js"></script>
        <script src="/bootstrap-4.3.1-dist/js/bootstrap.min.js"></script>
    </head>
    <body>
        <%- include public/header.html %>
        <div class="main-content">
            <%- include public/leftU.html %>

            <div class="product-page">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="#">余额管理</a></li>
                        <li class="breadcrumb-item active" aria-current="page">充值&退款</li>
                    </ol>
                </nav>
                <div class="card mb-3" style="width: 100%;">
                    <div class="card-header">搜索</div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item" style="display:flex;justify-content:space-between;align-items:center;">
                            <form class="form-inline" enctype="multipart/form-data" action="/room/search" method="GET">
                                    名称
                                <input type="text" class="form-control mx-2" name="name" placeholder="input ProductName">
                                <input type="submit" class="form-control" value="开始搜索">
                            </form>
                            <div>
                                <a href="/room/previous" class="btn btn-success mr-2">上一页</a>
                                <a href="/room/next" class="btn btn-danger">下一页</a>
                            </div>
                        </li>
                    </ul>
                </div>
                <!--------------------------------------------------------------------------------------------------------------------------->
                <div class="card text-center">
                    <div class="card-header">
                      <ul class="nav nav-tabs card-header-tabs">
                        <li class="nav-item">
                          <a class="nav-link active" aria-current="true" href="#">充值</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="#">退款</a>
                        </li>

                      </ul>
                    </div>
                    <div class="card-body">
                      
                        <div class="card mb-3" style="width: 100%;">
                            <div class="card-header">本月数据</div>
                            <ul class="list-group list-group-flush">
                                <li class="list-group-item">
                                    <form action="/room/balance" enctype="multipart/form-data" method="post">
                                        <div class="form-group row">
                                            <label for="building" class="col-1 col-form-label">所在楼号：</label>
                                            <input type="text" class="form-control col-1" id="building" name="building">
                                            <label for="building" class="col-1 col-form-label">幢</label>
                                        </div>
                                        <div class="form-group row">
                                            <label for="door" class="col-1 col-form-label">住户门牌：</label>
                                            <input type="text" id="door" class="form-control col-1" name="door">
                                            <label for="door" class="col-1 col-form-label">室</label>
                                        </div>
                                        <div class="form-group row">
                                            <label for="balance" class="col-1 col-form-label">充值金额：</label>
                                            <input type="text" id="waterC" class="form-control col-1" name="balance">
                                            <label for="balance" class="col-1 col-form-label">吨</label>
                                        </div>
                                        </div>
                                        <input type="submit" class="btn btn-primary" value="提交">
                                    </form>
                                </li>
                            </ul>
                        </div>

                    </div>
                  </div>
                  <!---------------------------------------------------------------------------------------------------------------------------------->
                  <div class="card mb-3" style="margin-left: 20px;min-width: 20%">
                    <div class="card-header">
                      账户信息
                    </div>
    
                  </div>
                <!------------------------------------------------------------------------------------------------------------------------------------>
            </div>
            
        </div>
    </body>
</html>